import * as echarts from "echarts";

// 饼图
const pie = {
    grid: {
        top: '30%',
        left: '3%',
        right: '3%',
        containLabel: true
    },
    tooltip: {
        trigger: 'item',
        backgroundColor: '#000',
        textStyle: {
            color: '#f200d6',
            fontSize: 47
        }
    },
    series: [
        {
            type: 'pie',
            radius: '60%',
            startAngle: 180,
            data: [
                { value: 45, name: '非过夜人数' },
                { value: 55, name: '过夜人数' },
            ],
            label: {
                fontSize: 47,
                color: '#f200d6',
            },
            labelLine: {
                length: '5%',
                length2: '5%',
                minTurnAngle: 90,
                lineStyle: {
                    width: 5//设置线条粗细
                }
            },
            itemStyle: {
                normal: {
                    color: function (colors) {
                        var colorList = [
                            '#73faec',
                            '#fbe34d',
                        ];
                        return colorList[colors.dataIndex];
                    }
                },
            },
            emphasis: {
                itemStyle: {
                    shadowBlur: 20,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)',
                }
            }
        }
    ]
}

// 人口漫出分布
const pie2 = {
    grid: {
        left: '3%',
        right: '3%',
        containLabel: true
    },
    tooltip: {
        trigger: 'item',
        backgroundColor: '#000',
        textStyle: {
            color: '#f200d6',
            fontSize: 47
        }
    },
    series: [
        {
            type: 'pie',
            radius: '80%',
            data: [
                { value: 149929, name: '四川省' },
                { value: 108951, name: '广东省' },
                { value: 102404, name: '北京市' },
                { value: 82842, name: '上海市' },
                { value: 69531, name: '深圳市' },
                { value: 62327, name: '陕西省' },
                { value: 60187, name: '山东省' },
                { value: 59296, name: '云南省' },
                { value: 52379, name: '重庆市' },
                { value: 46612, name: '湖北省' },
            ],
            label: {
                fontSize: 47,
                color: '#f200d6',
            },
            labelLine: {
                length: '5%',
                length2: '8%',
                minTurnAngle: 90,
                lineStyle: {
                    width: 5//设置线条粗细
                }
            },
            itemStyle: {
                normal: {
                    color: function (colors) {
                        var colorList = [
                            '#ffff00',
                            '#ff0000',
                            '#91cd77',
                            '#ef6567',
                            '#f9c956',
                            '#ffa500',
                            '#4eb4f8',
                            '#00e5aa',
                            '#800080',
                            '#75bedc',
                        ];
                        return colorList[colors.dataIndex];
                    }
                },
            },
            emphasis: {
                itemStyle: {
                    shadowBlur: 20,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)',
                }
            }
        }
    ]
}

// 性别分布
const pieOption = {
    grid: {
        containLabel: true
    },
    tooltip: {
        trigger: 'item',
        backgroundColor: '#000',
        textStyle: {
            color: '#ffffff',
            fontSize: 47
        }
    },
    series: [
        {
            type: 'pie',
            radius: ['40%', '70%'],
            startAngle: 160,
            data: [
                { value: 5500, name: '男' },
                { value: 4500, name: '女' }
            ],
            label: {
                fontSize: 47,
                color: '#ffffff',
            },
            labelLine: {
                length: '5%',
                length2: '1%',
                minTurnAngle: 90,
                lineStyle: {
                    width: 5//设置线条粗细
                }
            },
            itemStyle: {
                normal: {
                    color: function (colors) {
                        var colorList = [
                            '#73faec',
                            '#fbe34d',
                        ];
                        return colorList[colors.dataIndex];
                    }
                },
            },
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

// 游客出行方式分布
const pieOption2 = {
    grid: {
        left: '0%',
        right: '7%',
        bottom: '0%',
        top: '5%',
        containLabel: true
    },
    tooltip: {
        trigger: 'item',
        backgroundColor: '#000',
        textStyle: {
            color: '#ffffff',
            fontSize: 47
        }
    },
    series: [
        {
            type: 'pie',
            radius: ['40%', '70%'],
            data: [
                { value: 55, name: '高铁' },
                { value: 23, name: '自驾' },
                { value: 12, name: '飞机' },
                { value: 10, name: '其他' },
            ],
            label: {
                fontSize: 47,
                color: '#ffffff',
            },
            labelLine: {
                length: '5%',
                length2: '1%',
                minTurnAngle: 90,
                lineStyle: {
                    width: 5//设置线条粗细
                }
            },
            itemStyle: {
                normal: {
                    color: function (colors) {
                        var colorList = [
                            '#ffa500',
                            '#4eb4f8',
                            '#00e5aa',
                            '#800080',
                            '#75bedc',
                        ];
                        return colorList[colors.dataIndex];
                    }
                },
            },
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

// 游客出行方式分布
const pieOption3 = {
    grid: {
        left: '0%',
        right: '7%',
        bottom: '5%',
        top: '0%',
        containLabel: true
    },
    tooltip: {
        trigger: 'item',
        backgroundColor: '#000',
        textStyle: {
            color: '#ffffff',
            fontSize: 47
        }
    },
    series: [
        {
            type: 'pie',
            radius: ['40%', '70%'],
            data: [

                { value: 1000, name: '18岁以下' },
                { value: 2200, name: '18-30岁' },
                { value: 3500, name: '31-45岁' },
                { value: 1800, name: '45-55岁' },
                { value: 1500, name: '45-56岁以上' },
            ],
            label: {
                fontSize: 47,
                color: '#ffffff',
            },
            labelLine: {
                length: '5%',
                length2: '1%',
                minTurnAngle: 90,
                lineStyle: {
                    width: 5//设置线条粗细
                }
            },
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};


// 游客资产等级分布
const pieOption4 = {
    grid: {
        left: '0%',
        right: '7%',
        bottom: '5%',
        top: '0%',
        containLabel: true
    },
    tooltip: {
        trigger: 'item',
        backgroundColor: '#000',
        textStyle: {
            color: '#ffffff',
            fontSize: 47
        }
    },
    series: [
        {
            type: 'pie',
            startAngle: 180,
            radius: ['40%', '70%'],
            data: [

                { value: 4800, name: '低收入' },
                { value: 3200, name: '中等收入' },
                { value: 2000, name: '高收入' },
            ],
            label: {
                fontSize: 47,
                color: '#ffffff',
            },
            labelLine: {
                length: '5%',
                length2: '1%',
                minTurnAngle: 90,
                lineStyle: {
                    width: 5//设置线条粗细
                }
            },
            itemStyle: {
                normal: {
                    color: function (colors) {
                        var colorList = [
                            '#addda8',
                            '#73faec',
                            '#fbe34d',
                        ];
                        return colorList[colors.dataIndex];
                    }
                },
            },
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

// 游客资产等级分布
const pieOption5 = {
    grid: {
        left: '0%',
        right: '7%',
        bottom: '5%',
        top: '0%',
        containLabel: true
    },
    tooltip: {
        trigger: 'item',
        backgroundColor: '#000',
        textStyle: {
            color: '#ffffff',
            fontSize: 47
        }
    },
    series: [
        {
            type: 'pie',
            radius: ['40%', '70%'],
            data: [
                { value: 13587, name: '达川区' },
                { value: 18569, name: '大竹县' },
                { value: 11412, name: ' 万源县' },
                { value: 19266, name: ' 宣汉县' },
                { value: 18709, name: ' 开江县' },
                { value: 10992, name: ' 渠县' },
                { value: 10890, name: ' 通川县' },
            ],
            label: {
                fontSize: 47,
                color: '#ffffff',
            },
            labelLine: {
                length: '5%',
                length2: '1%',
                minTurnAngle: 90,
                lineStyle: {
                    width: 5//设置线条粗细
                }
            },
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};


// 柱状图
const column = {
    grid: {
        left: '8%',
        right: '5%',
    },
    xAxis: {
        type: 'category',
        data: ['xx省', 'xx省', 'xx省', 'xx省', 'xx省', 'xx省', 'xx省', 'xx省', 'xx省', 'xx省'],
        axisLabel: {
            fontSize: 40,
            color: '#ffffff',
        }
    },
    yAxis: {
        type: 'value',
        splitLine: {
            show: false
        },
        axisLabel: {
            fontSize: 40,
            color: '#ffffff',
        }
    },
    series: [
        {
            data: [1000, 900, 800, 700, 600, 500, 400, 300, 200, 180],
            type: 'bar',
            backgroundStyle: {
                color: 'rgba(180, 180, 180, 0.2)'
            },
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        // 四个数字分别对应 数组中颜色的开始位置，分别为 右，下，左，上。例如（1,0,0,0 ）代表从右边开始渐
                        // 变。offset取值为0~1，0代表开始时的颜色，1代表结束时的颜色，柱子表现为这两种颜色的渐变。
                        offset: 0,
                        color: '#f200d6'
                    }, {
                        offset: 1,
                        color: '#7703c8'
                    }]),
                }
            },
        }
    ]
};

// 镂空饼图
const emptyPie = {
    series: [
        {
            type: 'pie',
            radius: '70%',
            data: [
                { name: '18岁以下', value: 93 },
                { name: '18-24岁', value: 32 },
                { name: '25-34岁', value: 65 },
                { name: '35-44岁', value: 44 },
                { name: '45-54岁', value: 52 },
                { name: '55岁以上', value: 52 },
            ],
            radius: ['50%', '70%'],
            outsideLabel: {
                style: {
                    fontSize: 38,
                    fill: '#48EFFF'
                },
                labelLineBendGap: '1%',
                labelLineStyle: {
                    lineWidth: 4,
                }
            }

        }
    ]
}

const horColumn = {
    xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01],
        splitLine: {
            show: false
        },
        axisLabel: {
            fontSize: 40,
            color: '#ffffff',
        }
    },
    tooltip: {
        trigger: 'axis',
        backgroundColor: '#000',
        textStyle: {
            color: '#7703c8',
            fontSize: 47
        }
    },
    grid: {
        left: '3%',
        right: '10%',
        containLabel: true
    },
    yAxis: {
        type: 'category',
        type: 'category',
        data: ['四川省', '广东省', '北京市', '上海市', '深圳市', '陕西省', '山东省', '云南省', '重庆市', '湖北市'],
        axisLabel: {
            fontSize: 40,
            color: '#ffffff',
        },
        splitLine: {
            show: false
        },
    },
    series: [
        {
            name: '2011',
            type: 'bar',
            data: [277635, 219660, 50629, 45675, 33795, 28267, 21768, 17166, 14953, 13627],
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                        // 四个数字分别对应 数组中颜色的开始位置，分别为 右，下，左，上。例如（1,0,0,0 ）代表从右边开始渐
                        // 变。offset取值为0~1，0代表开始时的颜色，1代表结束时的颜色，柱子表现为这两种颜色的渐变。
                        offset: 0,
                        color: '#f200d6'
                    }, {
                        offset: 1,
                        color: '#7703c8'
                    }]),
                }
            },
        }
    ]
};

// 折线图
const foldLine = {
    grid: {
        left: '3%',
        right: '3%',
        bottom: '3%',
        containLabel: true
    },
    tooltip: {
        trigger: 'axis',
        backgroundColor: '#000',
        textStyle: {
            color: '#7703c8',
            fontSize: 47
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['0点', '1点', '2点', '3点', '4点', '5点', '6点', '7点', '8点', '9点', '10点', '11点', '12点', '13点', '14点', '15点', '16点', '17点', '18点', '19点', '20点', '21点', '22点', '23点'],
        axisLabel: {
            fontSize: 32,
            color: '#43a9c6',
        }
    },
    yAxis: {
        type: 'value',
        splitLine: {
            show: false
        },
        axisLabel: {
            fontSize: 32,
            color: '#43a9c6',
        }
    },
    series: [
        {
            data: [4644087, 4777251, 4590556, 4731275, 4769965, 4572666, 4893845, 4820030, 4996337, 4622456, 4836828, 4984396, 4708615, 4606337, 4971234, 4920765, 4951626, 4503383, 4591495, 4837437, 4881326, 4663829, 4958148],
            type: 'line',
            smooth: true,
            areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: '#0c5075'
                    },
                    {
                        offset: 1,
                        color: '#4b2282'
                    }
                ])
            },
            lineStyle: {
                normal: {
                    width: 5
                }
            }

        }
    ],
    color: ['#0073d1']
}

// 条形图
const option = {
    grid: {
        left: '13%',
        right: '10%',
    },
    xAxis: {
        type: 'category',
        data: ['1-2h', '2-4h', '4h以上'],
        axisLabel: {
            fontSize: 38,
            color: '#43a9c6',
        }
    },
    tooltip: {
        trigger: 'item',
        backgroundColor: '#000',
        textStyle: {
            color: '#7703c8',
            fontSize: 47
        }
    },
    yAxis: {
        type: 'value',
        splitLine: {
            show: false
        },
        axisLabel: {
            fontSize: 38,
            color: '#43a9c6',
        }
    },
    series: [
        {
            data: [600, 400, 200],
            type: 'bar',
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        // 四个数字分别对应 数组中颜色的开始位置，分别为 右，下，左，上。例如（1,0,0,0 ）代表从右边开始渐
                        // 变。offset取值为0~1，0代表开始时的颜色，1代表结束时的颜色，柱子表现为这两种颜色的渐变。
                        offset: 0,
                        color: '#f200d6'
                    }, {
                        offset: 1,
                        color: '#7703c8'
                    }]),
                }
            },
        }
    ]
};

// 柱状图
const column5 = {
    grid: {
        left: '10%',
        right: '5%',
        bottom: '8%'
    },
    tooltip: {
        trigger: 'item',
        backgroundColor: '#000',
        textStyle: {
            color: '#7703c8',
            fontSize: 47
        }
    },
    xAxis: {
        type: 'category',
        data: ['四川省', '广东省', '北京市', '上海市', '深圳市', '陕西省', '山东省', '云南省', '重庆市', '湖北市'],
        axisLabel: {
            fontSize: 32,
            color: '#ffffff',
            fontWeight: 'bold'
        }
    },
    yAxis: {
        type: 'value',
        splitLine: {
            show: false
        },
        axisLabel: {
            fontSize: 32,
            color: '#ffffff',
            fontWeight: 'bold'
        }
    },
    series: [
        {
            data: [277635, 219660, 50629, 45675, 33795, 28267, 21768, 17166, 14953, 13627],
            type: 'bar',
            backgroundStyle: {
                color: 'rgba(180, 180, 180, 0.2)'
            },
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        // 四个数字分别对应 数组中颜色的开始位置，分别为 右，下，左，上。例如（1,0,0,0 ）代表从右边开始渐
                        // 变。offset取值为0~1，0代表开始时的颜色，1代表结束时的颜色，柱子表现为这两种颜色的渐变。
                        offset: 0,
                        color: '#f200d6'
                    }, {
                        offset: 1,
                        color: '#7703c8'
                    }]),
                }
            },
        }
    ]
};

// 行政消费排名
const column2 = {
    grid: {
        left: '0%',
        right: '5%',
        containLabel: true
    },
    xAxis: {
        type: 'category',
        data: ['万源市', '宣汉县', '达川区', '通达区', '大竹县', '渠县', '开江县'],
        axisLabel: {
            fontSize: 32,
            color: '#ffffff',
            fontWeight: 'bold'
        }
    },
    tooltip: {
        trigger: 'item',
        backgroundColor: '#000',
        textStyle: {
            color: '#7703c8',
            fontSize: 47
        }
    },
    yAxis: {
        type: 'value',
        splitLine: {
            show: false
        },
        axisLabel: {
            fontSize: 32,
            color: '#ffffff',
            fontWeight: 'bold'
        }
    },
    series: [
        {
            data: [30000, 30000, 2500, 2200, 1900, 1800, 1100],
            type: 'bar',
            backgroundStyle: {
                color: 'rgba(180, 180, 180, 0.2)'
            },
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        // 四个数字分别对应 数组中颜色的开始位置，分别为 右，下，左，上。例如（1,0,0,0 ）代表从右边开始渐
                        // 变。offset取值为0~1，0代表开始时的颜色，1代表结束时的颜色，柱子表现为这两种颜色的渐变。
                        offset: 0,
                        color: '#f200d6'
                    }, {
                        offset: 1,
                        color: '#7703c8'
                    }]),
                }
            },
        }
    ]
};

const column3 = {
    grid: {
        left: '0%',
        right: '5%',
        containLabel: true
    },
    xAxis: {
        type: 'category',
        data: ['万源市', '宣汉县', '达川区', '通达区', '大竹县', '渠县', '开江县'],
        axisLabel: {
            fontSize: 32,
            color: '#ffffff',
            fontWeight: 'bold'
        }
    },
    tooltip: {
        trigger: 'item',
        backgroundColor: '#000',
        textStyle: {
            color: '#7703c8',
            fontSize: 47
        }
    },
    yAxis: {
        type: 'value',
        splitLine: {
            show: false
        },
        axisLabel: {
            fontSize: 32,
            color: '#ffffff',
            fontWeight: 'bold'
        }
    },
    series: [
        {
            data: [269825, 101318, 137184, 211355, 290954, 246429, 113628],
            type: 'bar',
            backgroundStyle: {
                color: 'rgba(180, 180, 180, 0.2)'
            },
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        // 四个数字分别对应 数组中颜色的开始位置，分别为 右，下，左，上。例如（1,0,0,0 ）代表从右边开始渐
                        // 变。offset取值为0~1，0代表开始时的颜色，1代表结束时的颜色，柱子表现为这两种颜色的渐变。
                        offset: 0,
                        color: '#f200d6'
                    }, {
                        offset: 1,
                        color: '#7703c8'
                    }]),
                }
            },
        }
    ]
};

const column4 = {
    grid: {
        left: '0%',
        right: '5%',
        containLabel: true
    },
    xAxis: {
        type: 'category',
        data: ['万源市', '宣汉县', '达川区', '通达区', '大竹县', '渠县', '开江县'],
        axisLabel: {
            fontSize: 32,
            color: '#ffffff',
            fontWeight: 'bold'
        }
    },
    tooltip: {
        trigger: 'item',
        backgroundColor: '#000',
        textStyle: {
            color: '#7703c8',
            fontSize: 47
        }
    },
    yAxis: {
        type: 'value',
        splitLine: {
            show: false
        },
        axisLabel: {
            fontSize: 32,
            color: '#ffffff',
            fontWeight: 'bold'
        }
    },
    series: [
        {
            data: [158469, 59505, 80569, 124130, 170879, 144729, 66735],
            type: 'bar',
            backgroundStyle: {
                color: 'rgba(180, 180, 180, 0.2)'
            },
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        // 四个数字分别对应 数组中颜色的开始位置，分别为 右，下，左，上。例如（1,0,0,0 ）代表从右边开始渐
                        // 变。offset取值为0~1，0代表开始时的颜色，1代表结束时的颜色，柱子表现为这两种颜色的渐变。
                        offset: 0,
                        color: '#f200d6'
                    }, {
                        offset: 1,
                        color: '#7703c8'
                    }]),
                }
            },
        }
    ]
};
export default {
    pie,
    pie2,
    column,
    emptyPie,
    horColumn,
    foldLine,
    option,
    pieOption,
    pieOption2,
    pieOption3,
    pieOption4,
    pieOption5,
    column5,
    column2,
    column3,
    column4
}